<template>
	<div class="index_main">
		<div class="exam_cont beautifulScroll">
			<div class="exam_top">
				<span class="exam_top_label" v-for='item in paperTypes' v-if="item.value == paperType">{{item.name}}</span>
				<el-button @click="changeState('')" :type="paperStatus==''?'primary':''">全部</el-button>
				<el-button @click="changeState(item.id)" :type="paperStatus==item.id?'primary':''" v-for='item in paperStatuss'>{{item.name}}</el-button>
			</div>
			<div class="exam_toptip">注：请在考试规定时间段内进行考试；开始考试后，考试时间不会间断，到时间未提交情况，系统会自动提交答卷！</div>
			<div class="exam_listmain clearfix">
				<emptymain :emptytext="'暂无考试'" :emptyheight="'505px'" :emptylist='dataList'>
					<span></span>
				</emptymain>
				<div class="exam_item" v-for="(item,index) in dataList">
					<div class="exam_itemstate disabled" v-if='item.paperStatus == 1'>未开考</div>
					<div class="exam_itemstate " v-if='item.paperStatus == 2'>考试中</div>
					<div class="exam_itemstate disabled" v-if='item.paperStatus == 3'>已结束</div>
					<div class="exam_itemP1 text-ellipsis">
						{{item.paperName}}
					</div>
					<div class="exam_itemP2 text-ellipsis">
						<span>考试时间：</span> {{item.startTime}}-{{item.endTime}}
					</div>
					<div class="exam_itemP3">
						<span class="exam_itemP3lable">限时：</span>{{item.duration}}分钟
						<span class="exam_itemP3stand"></span>
						<span class="exam_itemP3lable">总分：</span>{{item.totalScore}}分
						<span class="exam_itemP3stand"></span>
						<span class="exam_itemP3lable">及格分：</span>{{item.passScore}}分
						<span class="exam_itemP3stand"></span>
						<span class="exam_itemP3lable">题数：</span>{{item.questionCount}}题
					</div>
					<el-button v-if="item.paperStatus == 1" type='primary' disabled size='small'>立即考试</el-button>
					<div v-if="item.paperStatus == 2">
						<el-button type='primary' v-if="item.submitStatus == 1" disabled size='small'>已提交</el-button>
						<el-button type='primary' v-if="item.submitStatus == 2 && item.isExistRecord == 1" @click='toExamDetailRe(item)' size='small'>继续考试</el-button>
						<el-button type='primary' v-if="item.submitStatus == 2 && item.isExistRecord != 1" @click='openExamDetail(item)' size='small'>立即考试</el-button>
						<el-button type='primary' v-if="item.submitStatus == 3" @click='openExamDetail(item)' size='small'>立即考试</el-button>
					</div>
					<div v-if="item.paperStatus == 3">
						<div v-if="item.submitStatus == 1">
							<el-button type='primary' v-if="item.correctStatus == 1" @click='toExamResult(item)' size='small'>查看详情</el-button>
							<el-button type='primary' v-if="item.correctStatus == 2" disabled size='small'>批阅中</el-button>
						</div>
						<div v-if="item.submitStatus == 2">
							<el-button type='primary' disabled size='small'>查看详情</el-button>
							<span class="exam_itemP4">异常 
								<el-tooltip class="item" effect="dark" content="异常退出，未继续考试" placement="right">
							    <i class="el-icon-warning-outline"></i>
							    </el-tooltip>
							</span>
						</div>
						<div v-if="item.submitStatus == 3">
							<el-button type='primary' disabled size='small'>未参考</el-button>
						</div>
					</div>
					<div class="exam_itemP5 success" v-if='item.correctStatus == 1 &&item.score >= item.passScore'>
						及格 &nbsp; &nbsp; &nbsp; 成绩：{{item.score}}分
					</div>
					<div class="exam_itemP5 error" v-if='item.correctStatus == 1 &&item.score < item.passScore'>
						不及格 &nbsp; &nbsp; &nbsp; 成绩：{{item.score}}分
					</div>
				</div>
			</div>
			<div class="index_mainpages">
				<el-pagination hide-on-single-page background @current-change="currentChange" :current-page="pageNum" :page-size="pageSize" layout="total,  prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</div>
		<div class="index_mask" v-show='examShow'>
			<div class="exam_dio_cont ">
				<div class="clearfix">
					<div class="exam_dio_left">
						<div class="exam_dio_leftP1">考生信息</div>
						<div class="exam_dio_leftP2">
							<img :src="baseurl + userinfo.headPortraitUrl" class="exam_dio_leftP2img" v-if="userinfo.headPortraitUrl" />
							<img src="@/images/1.png" class="exam_dio_leftP2img" v-if="!userinfo.headPortraitUrl" />
							<div class="exam_dio_leftP3">
								<img src="@/images/exam_dio_leftP31.png" v-if="userinfo.sex == 'M'" />
								<img src="@/images/exam_dio_leftP32.png" v-if="userinfo.sex == 'F'" />
							</div>
						</div>
						<div class="exam_dio_leftP4">{{userinfo.studentName}}</div>
						<div class="exam_dio_leftP5">{{userinfo.studentNo}}</div>
						<div class="exam_dio_leftP6"></div>
						<div class="exam_dio_leftP7">{{examInfo.startTime}}-{{examInfo.endTime}} </div>
						<el-row>
							<el-col :span='12'>
								<div class="exam_dio_leftP8">
									<img src="@/images/exam_dio_leftP81.png" /> 限时：{{examInfo.duration}}分钟
								</div>
							</el-col>
							<el-col :span='12'>
								<div class="exam_dio_leftP8">
									<img src="@/images/exam_dio_leftP82.png" /> 总分：{{examInfo.totalScore}}分
								</div>
							</el-col>
							<el-col :span='12'>
								<div class="exam_dio_leftP8">
									<img src="@/images/exam_dio_leftP83.png" /> 及格分：{{examInfo.passScore}}分
								</div>
							</el-col>
							<el-col :span='12'>
								<div class="exam_dio_leftP8">
									<img src="@/images/exam_dio_leftP84.png" /> 题数：{{examInfo.questionCount}}题
								</div>
							</el-col>
						</el-row>
					</div>
					<div class="exam_dio_right">
						<div class="exam_dio_rightP1">
							注意事项
						</div>
						<div class="exam_dio_rightP2">
							<div class="exam_dio_rightP3">
								1、进入考试后，将<span class="mainColor">无法中途退出、关闭、切换系统</span>， 提交试卷后，页面将会自动关闭。
							</div>
							<div class="exam_dio_rightP3">
								2、若遇到电脑卡机或电脑关机等原因，致使考试中途 退出，可在<span class="mainColor">30分钟内，重新登录继续进行考试。 </span>
							</div>
							<div class="exam_dio_rightP3">
								3、诊断完成后，需等待老师<span class="mainColor">批阅完成后，才可以查看 试卷。  </span>
							</div>
							<div class="exam_dio_rightP3">
								4、系统将会自动记录考试记录，考生可以进入<span class="mainColor">“考试 中心-模拟考试 / 正式考试”</span>模块进行查看。
							</div>
						</div>
					</div>
				</div>
				<div class="exam_dio_bottom">
					<el-button type='primary' @click='closeExamDetail'>取消 </el-button>
					<el-button type='primary' @click='toExamDetail'>已知晓，进入考试 </el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { paperInfoList } from "@/api/paper.js"
	import { selectStudentDetail } from "@/api/center.js"
	export default {
		data() {
			return {
				paperType: this.$route.query.paperType || 'SIMULATE',
				paperTypes: [{
					name: '模拟考试',
					value: 'SIMULATE'
				}, {
					name: '正式考试',
					value: 'EXAM'
				}],
				userinfo: {},
				pageNum: 1,
				pageSize: 8,
				total: 0,
				paperStatus: '',
				dataList: [],
				paperStatuss: [{
					id: '1',
					name: '未开考',
				}, {
					id: '2',
					name: '考试中'
				}, {
					id: '3',
					name: '已结束'
				}],
				examInfo: {},
				examShow: false,
			}
		},
		created() {
			this.getinfo()
		},
		mounted() {

		},
		methods: {
			getinfo() {
				selectStudentDetail().then(res => {
					if(res.code == '200') {
						this.userinfo = res.data;
						this.getlist();
					}
				})
			},
			changeState(paperStatus) {
				if(this.paperStatus != paperStatus) {
					this.paperStatus = paperStatus;
					this.currentChange(1);
				}
			},
			currentChange(pageNum) {
				this.pageNum = pageNum;
				this.getlist();
			},
			getlist() {
				paperInfoList({
					paperStatus: this.paperStatus,
					paperType: this.paperType,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				}).then(res => {
					this.dataList = res.data.list;
					this.total = res.data.total;
				})
			},
			closeExamDetail() {
				this.examInfo = {}
				this.examShow = false;
			},
			openExamDetail(item) {
				this.examInfo = Object.assign({}, item)
				this.examShow = true;
			},
			toExamDetailRe(item) {
				this.$router.push({
					name: 'examdetail',
					query: {
						paperId: item.paperId
					}
				})
			},
			toExamDetail() {
				this.$router.push({
					name: 'examdetail',
					query: {
						paperId: this.examInfo.paperId
					}
				})
			},
			toExamResult(item) {
				this.$router.push({
					name: 'examresult',
					query: {
						paperId: item.paperId,
					}
				})
			},
		},
	}
</script>